@charset "utf-8";
*{
    margin:0;
    padding:0;
}
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem;
}
@function f($fz) {
    @return $fz / 14 * 1em
}

html,body{
    width:100%;
    height:100%;
    overflow: hidden;
}
.web{ 
    position: relative;
    width:100%;
    height:100%;
    overflow: hidden;
    >header{
        height:r(197);
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        >label{
            margin-left:r(48);
            // margin-bottom:50px;
            >span{
                width:33px;
                height:3px;
                display:block;
                background:#000;
                margin-top:7px;
               
            }
        }
        >.logo{
            width:150px;
            transition: width .5s ease-in-out;
            >img{
                width:100%;
            }
        }
        >label{
            display: inline-block;
            margin-right:r(48);
            // margin-bottom:35px;
        }
    }//header
    >.content{
        width:100%;
        margin: 0 auto;    
        padding-right: 30px;  
        position: absolute;
        left:0;
        bottom:0;
        top:r(197);
        right: -30px;
        overflow-x: hidden;
	    overflow-y: scroll;
        >.banner{
            width:r(1477);
            margin: 0 auto;
            overflow: hidden;
            >.img_box{
                // display: flex;
                // display: -webkit-flex;
                >.banner_img{
                    // position: relative;
                    width:100%;
                    // margin:0 auto;
                    >img{
                        width:100%;
                    }
                    >.b_uttom{
                        position: absolute;
                        left:50%;
                        transform:translateX(-50%);
                        bottom:r(200);
                        font-size: 18px;
                        color:#fff;
                        font-family: 微软雅黑;
                        padding:r(13) r(68);
                        border:1px #fff solid;
                    }    
                }
            }
         
        }//banner
        >.line_content{
            display: flex;
            display: -webkit-flex;
            // justify-content: space-around;
            justify-content: center;
            align-items: center;
            // width: 12.225rem;
            margin: 0 auto;
            margin-top: r(90);
            margin-bottom: r(90);
            >.bottom_line{
                border-bottom:2px #000 solid;
                
            }
            >.one::before{
                content: "";
                display: inline-block;
                background:#fd8985;
                width:r(55);
                height: 2px;
                font-weight: bold;
                vertical-align: middle;
                margin:0 r(8);
            }
            >.two::before{
                content: "";
                display: inline-block;
                background:#fd8985;
                width:r(55);
                height: 2px;
                font-weight: bold;
                vertical-align: middle;
                margin:0 r(8);
            }
            >.two::after{
                content: "";
                display: inline-block;
                background:#fd8985;
                width:r(55);
                height: 2px;
                font-weight: bold;
                vertical-align: middle;
                margin:0 r(8);
            }
            >.three:after{
                content: "";
                display: inline-block;
                background:#fd8985;
                width:r(55);
                height: 2px;
                font-weight: bold;
                vertical-align: middle;
                margin:0 r(8);
            }
        }
        >.width_box{
            text-align: center;
            margin:0 auto;
            width:r(1245);
                .product{
                    display: flex;
                    display:-webkit-flex;
                    justify-content: space-between;
                    >.left_img{
                        width:r(818);
                        >a{
                            display: block;
                            width:100%;
                            >img{
                                width:100%;
                            }
                        }
                      
                        >p{
                            margin-top:36px;
                            text-align: center;
                            font-size:16px;
                            color:#000;
                        }
                        >span{
                            display: block;
                            text-align: center;
                            font-size:21px;
                            color:#000;
                            margin-bottom:68px;
                        }
                    }
                    >.right_img{
                        width:r(387);
                        >a{
                            display: block;
                            width:100%;
                            >img{
                                width:100%;
                            }
                        }
                        >p{
                            margin-top:36px;
                            text-align: center;
                            font-size:16px;
                            color:#000;
                        }
                        >span{
                            display: block;
                            text-align: center;
                            font-size:21px;
                            color:#000;
                            margin-bottom:68px;
                        }
                    }
                }//product
                // >.text_box{
                //     margin-top:36px;
                //     margin-bottom:68px;
                //     display: flex;
                //     display:-webkit-flex;
                //     justify-content: space-between;
                //     >.left_txt{
                //         width:r(816);
                //         >p{
                //             text-align: center;
                //             font-size:16px;
                //             color:#000;
                //         }
                //         >span{
                //             display: block;
                //             text-align: center;
                //             font-size:21px;
                //             color:#000;
                //         }
                //     }
                //     >.right_txt{
                //         width:r(388);
                //         >p{
                //             text-align: center;
                //             font-size:16px;
                //             color:#000;
                //         }
                //         >span{
                //             display: block;
                //             text-align: center;
                //             font-size:21px;
                //             color:#000;
                //         }
                //     }
                // }//text_box
                >.productB{
                    display: flex;
                    display:-webkit-flex;
                    justify-content: space-between;
                    >.left_img{
                        width:r(437);
                        >a{
                            display: block;
                            width:100%;
                            >img{
                                width:100%;
                            }
                        }
                        >p{
                            margin-top:36px;
                            text-align: center;
                            font-size:16px;
                            color:#000;
                        }
                        >span{
                            display: block;
                            text-align: center;
                            font-size:21px;
                            color:#000;
                            margin-bottom:68px;
                        }
                    }
                    >.right_img{
                        width:r(764);
                        >a{
                            display: block;
                            width:100%;
                            >img{
                                width:100%;
                            }
                        }
                        >p{
                            margin-top:36px;
                            text-align: center;
                            font-size:16px;
                            color:#000;
                        }
                        >span{
                            display: block;
                            text-align: center;
                            font-size:21px;
                            color:#000;
                            margin-bottom:68px;
                        }
                    }
                }//productB
                // >.text_boxB{
                //     margin-top:36px;
                //     margin-bottom:70px;
                //     display: flex;
                //     display:-webkit-flex;
                //     justify-content: space-between;
                //     >.left_txt{
                //         width:r(396);
                //         >p{
                //             text-align: center;
                //             font-size:16px;
                //             color:#000;
                //         }
                //         >span{
                //             display: block;
                //             text-align: center;
                //             font-size:21px;
                //             color:#000;
                //         }
                //     }
                //     >.right_txt{
                //         width:r(806);
                //         >p{
                //             text-align: center;
                //             font-size:16px;
                //             color:#000;
                //         }
                //         >span{
                //             display: block;
                //             text-align: center;
                //             font-size:21px;
                //             color:#000;
                //         }
                //     }
                // }//text_boxB
                >.b_uttom{
                    margin: 0 auto;
                    text-align: center;
                    display: inline-block;
                    font-size: 18px;
                    color:#000;
                    font-family: 微软雅黑;
                    padding:r(13) r(68);
                    border:1px #000 solid;
                    margin-bottom:r(140);
                }   
        }//width_box
        >.bg_img{
            position: relative;
            width:r(1920);
            >img{
                width:100%;
            }
            >footer{
                width:100%;
                display:flex;
                display:-webkit-flex;
                justify-content: space-around;
                align-items: center;
                background:rgba($color: #000000, $alpha: .5);
                position: absolute;
                bottom:0;
                padding-top:r(45);
                padding-bottom:r(45);
                >p{
                    font-size:11px;
                    color:#fff;
                }
                >div{
                    display: flex;
                    display:-webkit-flex;
                    >input{
                        display: none;
                    }
                    #jiantou_a:checked ~label{
                        transform: rotateZ(-90deg);
                    }
                   
                        >ul{
                            display: flex;
                            display:-webkit-flex;
                            display: none;
                            >li{
                                width:r(60);
                                >img{
                                    width:100%;
                                }
                            }
                            
                        }
                    >label{
                        >span{
                            display: block;
                            width:r(35);
                            >img{
                                width:100%;
                            }
                        }
                    }
                }
            }
        }
       
    }//content
    .content::-webkit-scrollbar {display:none}
}//web
@media only screen and (min-width: 768px) {
    .web{ 
        >header{
            >label{
            }
        }//header
        >.content{
            >.banner{
                >.img_box{
                    >.banner_img{
                        >img{
                        }
                        >.b_uttom{
                            transition:background .5s ease-in-out;
                        }  
                        >.b_uttom:hover{
                            background: rgba($color: #fff, $alpha: 0.3);
                            color:#000;
                            border: transparent 1px solid;
                        }  
                    }
                }
             
            }//banner
            >.width_box{
                text-align: center;
                margin:0 auto;
                width:r(1245);
                    .product{
                        display: flex;
                        display:-webkit-flex;
                        justify-content: space-between;
                        >.left_img{
                            width:r(818);
                            >a{
                                display: block;
                                width:100%;
                                height:r(520);
                                overflow: hidden;
                             
                                >img{
                                    width:100%;
                                    transition: transform .5s ease-in-out;
                                }
                                >img:hover{
                                    transform: scale(1.1);
                                }
                            }
                        }
                        >.right_img{
                            width:r(387);
                            >a{
                                display: block;
                                width:100%;
                                height:r(520);
                                overflow: hidden;
                                
                                >img{
                                    width:100%;
                                    transition: transform .5s ease-in-out;
                                }
                                >img:hover{
                                    transform: scale(1.1);
                                }
                            }
                        }
                    }//product
                  
                    >.productB{

                        >.left_img{
                            width:r(437);
                            >a{
                                display: block;
                                width:100%;
                                height:r(520);
                                overflow: hidden;
                               
                                >img{
                                    width:100%;
                                    transition: transform .5s ease-in-out;
                                }
                                >img:hover{
                                    transform: scale(1.1);
                                }
                            }
                        }
                        >.right_img{
                            width:r(764);
                            >a{
                                display: block;
                                width:100%;
                                height:r(520);
                                overflow: hidden;
                              
                                >img{
                                    width:100%;
                                    transition: transform .5s ease-in-out;
                                }
                                >img:hover{
                                    transform: scale(1.1);
                                }
                            }
                          
                        }
                    }//productB
                  
                    >.b_uttom{
                        transition: background .5s ease-in-out;
                    }
                    >.b_uttom:hover{
                        background:rgba($color: #a3a2a2, $alpha: 0.5);
                        color:#fff;
                        border: transparent 1px solid;
                    }   
            }//width_box
            >.bg_img{
                position: relative;
                width:r(1920);
                >img{
                    width:100%;
                }
                >footer{
                    width:100%;
                    display:flex;
                    display:-webkit-flex;
                    justify-content: space-around;
                    align-items: center;
                    background:rgba($color: #000000, $alpha: .5);
                    position: absolute;
                    bottom:0;
                    padding-top:r(45);
                    padding-bottom:r(45);
                    >p{
                        font-size:11px;
                        color:#fff;
                    }
                    >div{
                        display: flex;
                        display:-webkit-flex;
                        >input{
                            display: none;
                        }
                        #jiantou_a:checked ~label{
                            transform: rotateZ(-90deg);
                        }
                       
                            >ul{
                                display: flex;
                                display:-webkit-flex;
                                display: none;
                                >li{
                                    width:r(40);
                                    >img{
                                        width:100%;
                                    }
                                }
                                
                            }
                        >label{
                            >span{
                                display: block;
                                width:r(35);
                                >img{
                                    width:100%;
                                }
                            }
                        }
                    }
                }
            }
           
        }//content
        .content::-webkit-scrollbar {display:none}
    }//web
}
@media only screen and (max-width: 768px) {
    .web{ 
        position: relative;
        width:100%;
        height:100%;
        >header{
            height:50px;
            >.left{
                width:r(100);
                margin-left:r(48);
                >span{
                    width:100%;
                    height:3px;
                    display:block;
                    background:#000;
                    margin-top:5px;         
                }
            }
            >.logo{
                width:r(150);
                >img{
                    width:100%;
                }
            }
            >.right{  
                width:r(100);  
                margin-right:r(48);
                // margin-bottom:35px;
                >img{
                    width:100%;
                }
            }
        }//header
        >.content{
            width:100%;
            margin: 0 auto;  
            height:auto;
            // padding-top:r(197);    
            position: absolute;
            left:0;
            right: 0px;
            bottom:0;
            top:r(197);
            padding-right:0;
            >.banner{
                width:100%;
                >.img_box{
                    // display: flex;
                    // display: -webkit-flex;
                    >.banner_img{
                        // position: relative;
                        width:100%;
                        // margin:0 auto;
                        >img{
                            width:100%;
                        }
                        >.b_uttom{
                            bottom:r(280);
                            font-size: 12px;
                            padding:r(18) r(80);

                        }    
                    }
                }
             
            }//banner
            >.line_content{
                display: none;     
            }
            >.width_box{
                text-align: center;
                margin:0 auto;
                margin-top:30px;
                width:90%;
                    .product{
                        display: flex;
                        display:-webkit-flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        >.left_img{
                            width:100%;
                            >img{
                                width:100%;
                            }
                            >p{
                                margin-top:26px;
                                text-align: center;
                                font-size:16px;
                                color:#000;
                            }
                            >span{
                                display: block;
                                text-align: center;
                                font-size:21px;
                                color:#000;
                                margin-bottom:48px;
                            }
                        }
                        >.right_img{
                            width:100%;
                            >img{
                                width:100%;
                            }
                            >p{
                                margin-top:26px;
                                text-align: center;
                                font-size:16px;
                                color:#000;
                            }
                            >span{
                                display: block;
                                text-align: center;
                                font-size:21px;
                                color:#000;
                                margin-bottom:48px;
                            }
                        }
                    }//product
 
                    >.productB{
                        display: flex;
                        display:-webkit-flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        >.left_img{
                            width:100%;
                            >img{
                                width:100%;
                            }
                            >p{
                                margin-top:26px;
                                text-align: center;
                                font-size:16px;
                                color:#000;
                            }
                            >span{
                                display: block;
                                text-align: center;
                                font-size:21px;
                                color:#000;
                                margin-bottom:48px;
                            }
                        }
                        >.right_img{
                            width:100%;
                            >img{
                                width:100%;
                            }
                            >p{
                                margin-top:26px;
                                text-align: center;
                                font-size:16px;
                                color:#000;
                            }
                            >span{
                                display: block;
                                text-align: center;
                                font-size:21px;
                                color:#000;
                                margin-bottom:48px;
                            }
                        }
                    }//productB
                    >.b_uttom{
                        margin: 0 auto;
                        text-align: center;
                        display: inline-block;
                        font-size: 16px;
                        color:#000;
                        font-family: 微软雅黑;
                        padding:r(13) r(68);
                        border:1px #000 solid;
                        margin-bottom:r(140);
                    }   
            }//width_box
            >.bg_img{
                position: relative;
                width:100%;
                >img{
                    width:100%;
                }
                >footer{
                    width:100%;
                    padding-top:20px;
                    padding-bottom:20px;
                    >p{
       
                    }
                    >div{
                   
                        >input{
                            display: none;
                        }
                        #jiantou_a:checked ~label{
                            transform: rotateZ(-90deg);
                        }
                       
                            >ul{
                                display: flex;
                                display:-webkit-flex;
                                display: none;
                                >li{
                                    width:r(60);
                                    >img{
                                        width:100%;
                                    }
                                }
                                
                            }
                        >label{
                            >span{
                                display: block;
                                width:r(35);
                                >img{
                                    width:100%;
                                }
                            }
                        }
                    }
                }//footer
            }
           
        }//content
        .content::-webkit-scrollbar {display:none}
    }//web
}